<template>
    <div>
        <div v-if="!isMobile" class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><el-icon><House /></el-icon></el-breadcrumb-item>
                <el-breadcrumb-item >Manual</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-content">
            <h2>1. Introduction</h2>
            <el-divider />
            <h2>2. Instructions</h2>
            <h3>2.1 Search</h3>
            <p>
                In Search page, you can get all ecDNA data by default. You can choose the page size to 
                change the number of the data per page in the bottom of the page.
            </p>
            <el-image src="/ask/static/img/search_default.png" />
            <p>
                Also, you can search by adding filter conditions in search bars according to your needs. 
                For example, you can choose gene 'LOC100996654', and then click the search button, you will
                get the results soon in the data table.
            </p>
            <el-image src="/ask/static/img/search_result1.png" />
            <p>
                Specially, when you need search data with chrom, there are two ways to get the results.
                The first one, you can choose the chrom only and you can get all data as a result.
                The second way is that after you have chosen the chorm, you can limit the range from start
                to the end. In this way, you must enter start and end number in a special 
                format: 'start-end'. 
            </p>
            <el-image src="/ask/static/img/search_result2.png" />
            <h3>2.2 Download</h3>
            <p>
                In Search page, you can also download all ecDNA data by clicking the download button without 
                any filter conditions.
            </p>
            <el-image src="/ask/static/img/download_default.png" />
            <p>
                In addition, you can also download some of the data by adding filter conditions in search bars according to your needs. 
                For example, you can choose gene 'LOC100996654', and then click the download button, you will
                get the related results file. The usage is the same as searching.
            </p>
            <el-image src="/ask/static/img/download_result1.png" />
        </div>
    </div>
</template>

<script lang="ts" setup name="Manual">
    import { ref } from "vue";

    let isMobile = ref(window.innerWidth <= 768)


</script>

<style scoped>
    .main-content {
        width: 100%;
    }


    p {
        font-size: large;
        text-align: justify;
    }
</style>